<template>
	<div class="SMreg">
		<div class="my-app">
			<h2 class="my-h2">商户信息/商户注册</h2>
			<div class="el-radio-type" :class="{pointerevents:status!=0&&status!=3}">
				<span class="title">商户类型：</span>
				<el-radio v-model="radio" :label="radiolist.list[0]">{{radiolist.name[0]}}</el-radio>
				<el-radio v-model="radio" :label="radiolist.list[1]">{{radiolist.name[1]}}</el-radio>
			</div>

			<div class="my-form-item">
				<div class="solt-tit">主体信息</div>
				<label-input :class="{pointerevents:status!=0&&status!=3}" v-for="(item, key, index) in bodyinfo" :key="index"
				 :LabelInput="item" @click.native="labelinputclick(item)"></label-input>

			</div>
			<div class="my-form-item">
				<div class="solt-tit">法人身份资料</div>
				<label-input v-for="(item, key, index) in legalinfo" :key="index" :LabelInput="item" :class="{pointerevents:status!=0&&status!=3}"></label-input>
				<div class="card-code" :class="{pointerevents:status!=0&&status!=3}">

					<el-upload class="upload-demo card_zf" :auto-upload="false" list-type="picture-card" :on-change="card_zchange"
					 action="">
						<img :src="card_z" />
					</el-upload>

					<el-upload class="upload-demo card_zf" :auto-upload="false" list-type="picture-card" :on-change="card_fchange"
					 action="">
						<img :src="card_f" />
					</el-upload>
				</div>
			</div>
			<div class="my-form-item" :class="{pointerevents:status!=0&&status!=3}">
				<div class="solt-tit">资质材料</div>
				<label-input v-for="(item, key, index) in qualified" :key="index" :LabelInput="item"></label-input>
				<div class="card-code">
					<el-upload class="upload-demo card_zf licbank" action="" :auto-upload="false" list-type="picture-card"
					 :on-change="licensechange">
						<img :src="license" />
					</el-upload>

					<el-upload class="upload-demo card_zf licbank" action="" :auto-upload="false" list-type="picture-card"
					 :on-change="bankchange">
						<img :src="bank" />
					</el-upload>
				</div>
			</div>
			<div class="my-form-item">
				<div class="solt-tit">商户负责人资料</div>
				<label-input :class="{pointerevents:status!=0&&status!=3}" v-for="(item, key, index) in personinfo" :key="index"
				 :LabelInput="item"></label-input>
				<div class="my-button">
					<el-button class="submit" @click="Regist" v-if="status===0">提交信息</el-button>
					<el-button class="submit" style="background: #999;" v-if="status===1">审核完成</el-button>
					<el-button class="submit" style="background: #999;" v-if="status===2">审核中</el-button>
					<el-button class="submit" style="background: #999;" v-if="status===3">{{status3}}</el-button>
				</div>

				<div class="map" @click="mapclose" v-show="mapshow">

					<div class="titmap" @click="containerfalse">
						<input id="address" type="textbox" v-model="searchtext" placeholder="请输入地址搜索">
						<button @click="codeAddress()">search</button>
						<div>双击或拖动图标选择</div>
					</div>
					<div id="container" @click="containerfalse"></div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import api from '../../../fetch/api'
	import reg from '../../../fetch/reg'
	import card_z from '@/assets/img/sys/card-z.png';
	import card_f from '@/assets/img/sys/card-f.png';
	import license from '@/assets/img/sys/license.png';
	import bank from '@/assets/img/sys/bank.png';
	export default {
		data() {
			return {
				status3: '',
				geocoder: null,
				searchtext: "",
				status: 0,
				centerlnglat: "",
				reslatLng: "",
				param: "",
				mapshow: false,
				card_z: card_z,
				card_f: card_f,
				license: license,
				bank: bank,
				NavName: "商户信息/商户注册",
				radio: 0,
				radiolist: {
					list: [1, 2],
					name: ['景区商户', '酒店商户'],
				},
				bodyinfo: [{
						label: "公司名称",
						name: " ",
						text: "unit_name",
						ref: "unit_name",
						textsta: true,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "公司地址",
						name: " ",
						text: "company_address",
						textsta: true,
						text: "company_address",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "经营地址",
						name: "",
						textsta: true,
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "经营主体",
						name: "",
						textsta: true,
						text: "operate",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "区域选择",
						name: "",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						cityselect: true,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					}
				],
				legalinfo: [{
						label: "公司法人姓名",
						name: "",
						textsta: true,
						text: "corporation",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "法人身份证",
						name: "",
						textsta: true,
						text: "corporation_card",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					}
				],
				qualified: [

					{
						label: "营业执照",
						name: "",
						textsta: true,
						text: "license_code",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "开户银行",
						name: "",
						textsta: true,
						text: "bank_name",
						buttonStart: false,
						uttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "银行账号",
						name: "",
						textsta: true,
						text: "bank_no",
						buttonStart: false,
						ttonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					}
				],
				personinfo: [{
						label: "联系人姓名",
						name: "",
						textsta: true,
						text: "contacts",
						buttonStart: false,
						tonText: "",
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "手机号码",
						name: "",
						textsta: true,
						text: 'phone',
						buttonStart: true,
						buttonText: "获取短信验证码",
						disabled: false,
						showpassword: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "输入短信验证",
						name: "",
						textsta: true,
						text: "code",
						buttonStart: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "邮件地址",
						name: "",
						textsta: true,
						text: "email",
						buttonStart: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					},
					{
						label: "微信号",
						name: "",
						textsta: true,
						text: "wechat",
						buttonStart: false,
						style: {
							labelwidth: '125px',
							inputwidth: '660px',
						}
					}
				],
				routerCregist: {
					type: 1, //number请选择渠道类型1景区, 2 酒店 允许值: 1, 2
					token: "", //string token
					unit_name: "", //string 请填写单位名称
					contacts: "", //string 请填写联系人
					phone: "", //string 请填写手机号码
					code: "", //number 请填写验证码
					company_code: "", //string 请填写企业识别码
					license_code: "", //string 请填写执照代码
					operate: "", //string 请填写经营主体
					bank_name: "", //string 请填写开户行
					bank_no: "", //string 请填写银行账号
					province: "", //string 请选择省份
					county: "", //string 请选择市
					city: "", //string 请选择区县
					company_address: "", //string	 请填写公司地址
					detailed_address: "", //string 请填写详细地址
					business_url: ["0", "1"], //string 请上传营业执照图片
					corporation: "", //String	 法人姓名
					corporation_card: "", //String	 法人身份证号码
					corporation_card_url: ["0", "1"], //Array	 身份证正反图片
					longitude: "", //string 请传入经度
					latitude: "", //string 请传入纬度
					star: "", //number 请传入酒店星级
					email: "", //string 请传入邮箱地址
					wechat: "", //	string	 请传入微信号
					is_agree: 1, //number 是否同意,1 同意 允许值: 1
				},
			}
		},
		beforeRouteUpdate(to, from, next) {
			this.setCregist(this.routerCregist)
			next();
		},
		computed: {
			...mapGetters([
				'token',
				'Cregist',
				'res_CompanyInfo',
				'UserInfo_data'
			])
		},
		mounted() {
			
			
			
			this.companyInfo()
			this.setCregist(this.routerCregist)
			// 渲染地图
			this.init();
			let req_Cregist = JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
			if (this.personinfo[0].name == "") {
				for (var i = 0; i < this.personinfo.length; i++) {
					if (i === 0) {
						this.personinfo[i].name = this.UserInfo_data.name;
						req_Cregist.contacts = this.UserInfo_data.name
						this.setCregist(req_Cregist)
					}
					if (i === 1) {
						this.personinfo[i].name = this.UserInfo_data.phone;
						req_Cregist.phone = this.UserInfo_data.phone
						this.setCregist(req_Cregist)
					}
				}
			}
		},

		methods: {
			...mapActions({
				setCregist: 'setCregist',
				getres_CompanyInfo: "getres_CompanyInfo",
				setcitylist: 'setcitylist',
			}),
			companyInfo() {
				this.$api.GetCompanyInfo({}, this.token)
					.then(res => {
						if (res.code === 200) {
							this.getres_CompanyInfo(res);
							if (this.res_CompanyInfo.code === 200) {
								this.status = this.res_CompanyInfo.result.status;
								this.status3 = this.res_CompanyInfo.result.reason;
								this.radio = this.res_CompanyInfo.result.type;
								this.bodyinfo[0].name = this.res_CompanyInfo.result.unit_name; //公司名称
								this.bodyinfo[1].name = this.res_CompanyInfo.result.company_address; //公司地址
								this.bodyinfo[2].name = this.res_CompanyInfo.result.detailed_address; //经营地址
								this.bodyinfo[3].name = this.res_CompanyInfo.result.operate; //经营主体
								this.bodyinfo[4].cityselect = false; //区域选择
								this.bodyinfo[4].textsta = true; //区域选择
								this.bodyinfo[4].name = this.res_CompanyInfo.result.province_name + "/" + this.res_CompanyInfo.result.county_name +
									"/" + this.res_CompanyInfo.result.city_name; //区域选择
								this.legalinfo[0].name = this.res_CompanyInfo.result.corporation; //公司法人姓名
								this.legalinfo[1].name = this.res_CompanyInfo.result.corporation_card; //法人身份证
								this.card_z = "http://www.ddmzj.com" + this.res_CompanyInfo.result.corporation_card_url[0]; //身份证正
								this.card_f = "http://www.ddmzj.com" + this.res_CompanyInfo.result.corporation_card_url[1]; //身份证反
								this.qualified[0].name = this.res_CompanyInfo.result.license_code; //营业执照
								this.qualified[1].name = this.res_CompanyInfo.result.bank_name; //开户银行
								this.qualified[2].name = this.res_CompanyInfo.result.bank_no; //银行账号
								this.license = "http://www.ddmzj.com" + this.res_CompanyInfo.result.business_url[0]; //营业执照照片
								this.bank = "http://www.ddmzj.com" + this.res_CompanyInfo.result.business_url[1]; //营业执照照片
								this.personinfo[0].name = this.res_CompanyInfo.result.contacts; //联系人姓名
								this.personinfo[1].name = this.res_CompanyInfo.result.phone; //手机号码
								this.personinfo[3].name = this.res_CompanyInfo.result.email; //邮件地址
								this.personinfo[4].name = this.res_CompanyInfo.result.wechat; //微信号
							}
						} else {
					this.$alert(res.meg, '提示', { confirmButtonText: '确定', });
						}
					})
			},
			Regist() {
				if (this.Cregist.type === "") {
					this.$alert('请选择渠道类型', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.unit_name === "") {
					this.$alert('请填写公司名称', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.company_address === "") {
					this.$alert('请填写公司地址', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.detailed_address === "") {
					this.$alert('请填写经营地址', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.operate === "") {
					this.$alert('请填写经营主体', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.province === "") {
					this.$alert('请选择省份', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.county === "") {
					this.$alert('请选择市', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.city === "") {
					this.$alert('请选择区县', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.corporation === "") {
					this.$alert('请填写法人姓名', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.corporation_card === "") {
					this.$alert('请填写法人身份证号码', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.license_code === "") {
					this.$alert('请填写营业执照', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.bank_name === "") {
					this.$alert('请填写开户行', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.bank_no === "") {
					this.$alert('请填写银行账号', '提示', { confirmButtonText: '确定', });
					return;
				}

				if (this.Cregist.contacts === "") {
					this.$alert('请填写联系人', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.phone === "") {
					this.$alert('请填写手机号码', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.code === "") {
					this.$alert('请填写验证码', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.email === "") {
					this.$alert('请传入邮箱地址', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.wechat === "") {
					this.$alert('请传入微信号', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.is_agree === "") {
					this.$alert('是否同意', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.corporation_card_url[0] === "0") {
					this.$alert('请上传身份证正面照', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.corporation_card_url[1] === "1") {
					this.$alert('请上传身份证反面照', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.business_url[0] === "0") {
					this.$alert('请上传营业执照', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.Cregist.business_url[1] === "1") {
					this.$alert('请上传银行开户行证明', '提示', { confirmButtonText: '确定', });
					return;
				}
				 
				let req_Cregist = JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
				if(this.radio===0){
					this.$alert('请选择商户类型', '提示', { confirmButtonText: '确定', });
					return;
				}else{
					req_Cregist.type = this.radio;
				}
				req_Cregist.token = this.token;
				this.setCregist(req_Cregist)
				this.$api.GetRegist(this.Cregist).then(res => {
					var meg=res.meg;
					if(res.code===200){
						meg='公司注册信息提交成功，请耐心等待审核<br/>审核通过后到<商户详情>中完善资料';
					}
					this.$alert(meg, '提示', { confirmButtonText: '确定',dangerouslyUseHTMLString: true, center: true});
				});
			},
			labelinputclick(res) {
				if (res.label === "经营地址") {
					this.mapshow = true;
				}
			},
			getRedcode(LabelInput) {
				let _this = this;
				this.$api.GetRedcode({
						phone: this.Cregist.phone
					})
					.then(res => {
					this.$alert(res.meg, '提示', { confirmButtonText: '确定',callback: action => {
						
							if (res.code === 200) {
								let n = 59
								let setter = setInterval(function() {
									LabelInput.buttonText = n;
									LabelInput.disabled = true;
									if (n < 1) {
										LabelInput.buttonText = "获取验证码";
										LabelInput.disabled = false;
									}
									n--;
								}, 1000)
								setTimeout(function() {
									clearInterval(setter)
								}, 61000);
							}
					} });
					})
			},
			codeAddress() {
				//通过getLocation();方法获取位置信息值
				this.geocoder.getLocation(this.searchtext);
			},
			init() {
				var _this = this;
				let req_Cregist = JSON.parse(JSON.stringify(_this.Cregist)); //this.templateData是父组件传递的对象

				// 获取当前位置
				var geolocation = new qq.maps.Geolocation("GMUBZ-ZUF3X-JVW4K-Z5F3Y-ZPSBT-CNBWQ", "ddmzj");
				var options = {
					timeout: 9000
				};
				var positionNum = 0;
				geolocation.getIpLocation(function(position) {
					_this.centerlnglat = {
						lng: position.lng,
						lat: position.lat
					}
				});

				var myLatlng = new qq.maps.LatLng(_this.centerlnglat.lat, _this.centerlnglat.lng);
				var myOptions = {
					zoom: 12,
					center: myLatlng,
					mapTypeId: qq.maps.MapTypeId.ROADMAP
				}
				var map = new qq.maps.Map(document.getElementById("container"), myOptions);
				var marker = new qq.maps.Marker({
					position: myLatlng,
					map: map,
				});
				marker.setDraggable(true);
				var info = new qq.maps.InfoWindow({
					map: map
				});
				_this.geocoder = new qq.maps.Geocoder({
					complete: function(result) {
						_this.bodyinfo[2].name = result.detail.address;
						_this.reslatLng += "," + result.detail.address;
						map.setCenter(result.detail.location);
						// 						var marker = new qq.maps.Marker({
						// 							map: map,
						// 							position: result.detail.location
						// 						});
						marker.setPosition(result.detail.location)
					},
				});
				var anchor = new qq.maps.Point(0, 39),
					size = new qq.maps.Size(42, 68),
					origin = new qq.maps.Point(0, 0),
					markerIcon = new qq.maps.MarkerImage(
						"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
						size,
						origin,
						anchor
					);
				marker.setIcon(markerIcon);
				//设置Marker停止拖动事件
				qq.maps.event.addListener(marker, 'dragend', function() {
					var latLng = new qq.maps.LatLng(marker.getPosition().lat, marker.getPosition().lng);
					_this.geocoder.getAddress(latLng);
					_this.reslatLng = latLng.lng + "," + latLng.lat
					_this.mapshow = false;
				});
				//添加监听事件
				qq.maps.event.addListener(map, 'dblclick', function(event) {
					marker.setPosition(event.latLng)
					var latLng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng);
					//调用获取位置方法
					_this.geocoder.getAddress(latLng);
					_this.reslatLng = event.latLng.getLng() + "," + event.latLng.getLat()
					_this.mapshow = false;
				});
			},

			card_zchange(file, fileList) {
				let _this = this;
				let req_Cregist = JSON.parse(JSON.stringify(_this.Cregist)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.card_z = windowURL.createObjectURL(file.raw);
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.upload(_this.param, _this.token, function(data) {
					req_Cregist.corporation_card_url[0] = data.url;
					_this.setCregist(req_Cregist)
				});
			},
			card_fchange(file, fileList) {
				let _this = this;
				let req_Cregist = JSON.parse(JSON.stringify(_this.Cregist)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.card_f = windowURL.createObjectURL(file.raw);
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.upload(_this.param, _this.token, function(data) {
					req_Cregist.corporation_card_url[1] = data.url;
					_this.setCregist(req_Cregist)
				});
			},
			licensechange(file, fileList) {
				let _this = this;
				let req_Cregist = JSON.parse(JSON.stringify(_this.Cregist)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.license = windowURL.createObjectURL(file.raw);
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.upload(_this.param, _this.token, function(data) {
					req_Cregist.business_url[0] = data.url;
					_this.setCregist(req_Cregist)
				});
			},
			bankchange(file, fileList) {
				let _this = this;
				let req_Cregist = JSON.parse(JSON.stringify(_this.Cregist)); //this.templateData是父组件传递的对象
				var windowURL = window.URL || window.webkitURL;
				_this.bank = windowURL.createObjectURL(file.raw);
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				this.$api.upload(_this.param, _this.token, function(data) {
					req_Cregist.business_url[1] = data.url;
					_this.setCregist(req_Cregist)
				});
			},
			mapclose() {
				this.mapshow = false;
			},
			containerfalse(e) {
				window.event ? window.event.cancelBubble = true : e.stopPropagation();
			},
			getsontext(res) {
				let req_Cregist = JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
				req_Cregist[res.text] = res.name;
				this.setCregist(req_Cregist)
			}
		},
		watch: {
			radio(newValue, oldValue) {
				let req_Cregist = JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
				req_Cregist.type = newValue;
				this.setCregist(req_Cregist)
			},
			reslatLng(newValue, oldValue) {
				var value = newValue.split(",")
				let req_Cregist = JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
				req_Cregist.longitude = value[0];
				req_Cregist.latitude = value[1];
				req_Cregist.detailed_address = value[2];
				this.setCregist(req_Cregist)
			}
		},
	}
</script>

<style scoped lang="less">
	.SMreg {
		.pointerevents {
			pointer-events: none;
		}

		.map {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, .3);
			display: flex;
			align-items: center;
			justify-content: center;

			input#address {
				width: 300px;
			}

			.titmap {
				width: 70%;
				display: flex;
				position: absolute;
				z-index: 4;
				top: 15%;
				font-size: 20px;
				color: #333;
			}

			#container {
				width: 70%;
				height: 70%;
			}
		}


		.card-code {
			display: flex;
			justify-content: center;

			.upload-demo {
				width: 260px;
				height: 166px;
				margin: 20px;

				img {
					width: 260px;
					height: 166px;
				}
			}
		}




		.licbank {
			height: 97px;
			overflow: hidden;

			img {
				width: 140px;
				height: 97px;
			}

			.el-upload--picture-card {
				border: none;
				height: 82px;
			}

			.el-upload-list {
				display: none;
			}
		}
	}
</style>
